<template>
	<view>
		<view class="tab_nav">
			<view class="navBar" v-for="(item, index) in navList" :key="index">
				<view :class="{'activite':isActive === index}" @click="checked(index)">
					{{item.title}}
				</view>
			</view>
		</view>
		<view class="nav-item" v-if="isActive == 0">
			<view class="item1">
				<image :src="imgsrc"></image>
				<view class="product-info">
					<text style="font-size: 30rpx;color: #1A1A1A;">{{productName}}</text>
					<text style="font-size: 20rpx;color: #666666;">库存：{{num1}}</text>
					<text style="font-size: 20rpx;color: #666666;">已售：{{num2}}</text>
				</view>
			</view>
			<view class="item2">
				<text>￥ {{price}}</text>
				<button type="button">上架商品</button>
			</view>
		</view>
	</view>
</template>
<script>
export default {
	data(){
		return {
			isActive:0,
			navList:[
				{
					index:0,
					title:'分类1'
				},
				{
					index:1,
					title:'分类2'
				},
				{
					index:2,
					title:'分类3'
				},
				{
					index:3,
					title:'分类4'
				},
				{
					index:4,
					title:'分类5'
				},
				{
					index:5,
					title:'分类6'
				}
			],
		    imgsrc:require("../../static/meat.png"),
			productName:'带皮五花肉（300g）',
			num1: 16546,
			num2: 165,
			price:14.81
		}
	},
	methods:{
		checked(index){
			this.isActive = index
		}
	}
}
</script>
<style>
	.tab_nav {
		display: flex;
		justify-content: center;
        align-items: center;
	}
	.navBar {
		width: 100%;
		height: 80rpx;
		line-height: 80rpx;
		width: 100%;
		text-align: center;
		font-size: 30rpx;
		font-family: Alibaba PuHuiTi;
		font-weight: 400;
		color: #666666;
	}
	.activite {
		position: relative;
	}
	.activite::after {
		content: '';
		position: absolute;
		width: 60rpx;
		height: 4rpx;
		background: #FEB140;
		left: 0px;
		right: 0px;
		bottom: 0px;
		margin: auto;
		color: #1A1A1A;
	}
	.nav-item {
		width: 650rpx;
		height: 190rpx;
		background: #FFFFFF;
		border-radius: 10rpx;
		margin: 30rpx;
		padding: 20rpx;
		display: flex;
		flex-direction: column;
		border: 1px solid #ddd;
	}
	.item1 {
		display: flex;
		flex-direction: row;
	}
	.item1 image {
		width: 80rpx;
		height: 80rpx;
	}
	.product-info {
		display: flex;
		flex-direction: column;
		justify-content: flex-start;
		margin-left: 20rpx;
		font-family: Alibaba PuHuiTi;
		font-weight: 400;
	}
	.item2 {
		margin: 30rpx 20rpx;
		display: flex;
		flex-direction: row;
	}
	.item2 text {
		font-size: 30rpx;
		color: #FF3030;
	}
	.item2 button {
		width: 180rpx;
		height: 40rpx;
		line-height: 40rpx;
		background: #FEB140;
		border-radius: 20rpx;
		font-size: 24rpx;
		color: #1A1A1A;
		margin-left: 310rpx;
	}
</style>
